<style scoped>

  .mint-navbar .mint-tab-item {
    padding: 4px 0 8px 0 !important;
  }

  .iconfont {
    color: #ffffff;
  }

  .index {
    height:100%;
    background: #edf1f5;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }


  .top {
    width: 100%;
  }

  .head {
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: #ffffff;
    padding: 25px 10px 0 10px;
  }

  .head > .head-left {
    width: 16px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .head > .head-left > h1 {
    margin-right: 6px;
  }

  .head > .head-center {
    flex: 1;
    position: relative;
  }

  .head > .head-center > h3 {
    position: absolute;
    top: 6px;
    left: 6px;
  }

  .head > .head-center > input {
    width: 100%;
    height: 100%;
    min-height: 26px;
    background: #FFFFFF;
    opacity: 0.5;
    border: none;
    padding-left: 30px;
    border-radius: 4px;
    font-size: 14px;
    color: #FFFFFF;
    /*;*/
  }

  .head > .head-center > input::placeholder {
    color: #666;
    font-size: 14px;
  }

  .head-right {
    width: 30px;
    height: 30px;
    margin-left: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .head-right > h1 {
    margin-left: 8px;
  }



  .nav {
    background: #ffffff;
    padding: 8px 16px;
    border-bottom: 1px solid #EDF1F5;
    box-sizing: border-box;
  }

  .nav ul {
    display: flex;
    flex-direction: row;
  }

  .nav ul li {
    flex: 1;
  }
  .nav ul li:first-child h1{

  }

  .nav ul li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #666;
  }
  .nav ul li a > div{

    background: -webkit-linear-gradient(top left,#91A5F8,#6379F8);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .nav ul li a h4{
    color: #666;
  }

  .nav ul li a h1 {
    font-size: 240%;
  }
  .lunbo {
    width: 100%;
    height:18rem;
  }

  @media screen and (max-width: 320px) {
    .nav ul li a h1 {
      font-size: 180%;
    }

    .nav ul li:last-child a h1 {
      font-size: 140%;
    }

    .lunbo {
      height:180px;
    }

    .li-left > h1 {
      font-size: 180%;
    }
    .nav ul li a > div{
      width:34px;
      height:34px;
    }
  }

  @media screen and (max-width: 375px) and (min-width: 321px) {
    .nav ul li a h1 {
      font-size: 200%;
    }

    .nav ul li:last-child a h1 {
      font-size: 160%;
    }
    /*.lunbo {
      height:200px;
    }*/
    .nav ul li a > div{
      width:40px;
      height:40px;
    }


    .li-left > h1 {
      font-size: 200%;
    }
  }

  @media screen and (min-width: 376px) {
    .nav ul li a h1 {
      font-size: 240%;
    }
    /*.lunbo {
      height:240px;
    }*/

    .nav ul li:last-child a h1 {
      font-size: 200%;
    }

    .li-left > h1 {
      font-size: 240%;
    }
    .nav ul li a > div{
      width:50px;
      height:50px;
    }
  }


  .content {
    /*margin-top:46px;*/
    width: 100%;
    height: auto;
    /*padding-bottom: 60px;*/
    background: #edf1f5;
    overflow: scroll;
  }

  .content-t {
    /*width: 100%;*/
    padding: 10px 30px;
    background: #ffffff;
  }

  .content-t > span {
    position: relative;
  }

  .content-t > span > b {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 3px;
    background: -webkit-linear-gradient(right, #91A5F8, #6379F8)
  }

  .content-bottom {
    margin: 0 20px;
  }

  .content-bottom > ul {
    display: flex;
    flex-direction: column;
    margin-bottom: 60px;
  }
  .content-bottom > ul > li {
    display: flex;
    /*flex-direction: column;*/
    background: #ffffff;
    margin-top: 10px;
    /*padding:10px 0;*/
    border-radius: 4px;
  }

  .content-bottom > ul > li:last-child {
    margin-bottom: 10px;
  }

  .content-bottom > ul > li > a {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .content-bottom > ul > li > a > .li-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #e9e9e9;
    padding: 6px 10px;
    align-items: center;
  }

  .content-bottom > ul > li > a > .li-bottom {
    display: flex;
    flex-direction: row;
    padding: 10px 10px;
    /*justify-content: space-between;*/
  }

  .content-bottom > ul > li > a > .li-top > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    opacity: 0.5;
  }

  .content-bottom > ul > li > a > .li-top > div > h3 {
    color: #666;
  }

  .content-bottom > ul > li > a > .li-top > div > h4 {
    display: flex;
    align-items: center;
  }

  .li-left > h1 {
    color: #F84949;
    display: flex;
    flex-direction: row;
  }

  .li-left > h1 h2 {
    color: #F84949;
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: 4px;
  }

  .li-left {
    flex: 3;
    margin-left: 4px;
  }

  .li-right {
    flex: 7;
    margin-right: 4px;
    padding: 6px 0;
  }

  .li-right > h3 {
    text-align: right;
  }

  .li-right > div {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 4px;
  }

  .li-right > div > h4 {
    color: #FE7A4A;
    border: 1px solid #FE7A4A;
    border-radius: 4px;
    padding: 0 4px;
  }

  .li-right > div > h4:first-child {
    margin-left: 4px;
  }

  .mint-navbar {
    padding: 4px 20px;
  }

  .mint-navbar .mint-tab-item.is-selected span {
    /*border-bottom: 3px solid #6379F8;*/
    color: #4D66FF;
    padding: 0 0 3px 0;
    position: relative;
  }

  .mint-navbar .mint-tab-item.is-selected span b {
    width: 60%;
    height: 3px;
    background: #6379F8;
    border-radius: 4px;
    position: absolute;
    left: 20%;
    bottom: -4px;
  }

  .mint-navbar .mint-tab-item.is-selected {
    border: none;
    opacity: 1;
  }

  .mint-navbar .mint-tab-item {
    padding: 14px 0;
    opacity: 0.5;
  }

  .guanzhu {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .guanzhu > img {
    width: 83px;
    height: 95px;
  }

  .guanzhu > p {
    display: flex;
    align-items: center;
  }

  /*金股推荐*/
  .jingu {
    margin: 10px 17px 13px 17px;
    background: #FFFFFF;
    border-radius: 10px;
    position: relative;
    /*padding: 10px;*/
  }

  .jingu-top {
    border-bottom: 1px solid #e9e9e9;
    display: flex;
    justify-content: space-between;
    padding: 6px 10px 2px 10px;
  }

  .jingu-left p {
    margin-top: 6px;
  }

  .jingu-right {
    text-align: right;
  }

  .jingu-right > h1 {
    color: #F84949
  }

  .jingu-m{
    padding:4px 10px;
    border-bottom: 1px solid #E9E9E9;
  }
  .jingu-middle {
    height:100px;
    line-height: 20px;
    overflow:hidden;
    text-overflow: ellipsis;
  }
  .box-content:after {
    bottom: 0;
    right: 0;
    content: "...";
    position: absolute;
  }
  .jingu-middle h5{
    /*margin:10px;*/
  }

  .jingu-bottom {
    padding: 4px 10px 2px 10px;
  }

  .jingu-bottom ul {
    display: flex;
  }

  .jingu-bottom ul li {
    flex: 1;
  }

  .jingu-bottom ul li h3 {
    margin-top: 4px;
    color: #F84949;
  }

  .buy-now {
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: flex-end;
  }

  .buy-now p {
    color: #FFFFFF;
    padding: 2px 30px;
    background: #6999F9;
    border-radius: 8px;
    letter-spacing: 2px;
    margin: 0 10px 4px 0;
  }


</style>
<style>
  .mint-tab-container {
    overflow: auto;
  }

  .mint-swipe-indicator {
    background: rgba(255, 255, 255, 0.5)
  }

  .mint-swipe-indicator.is-active {
    width: 16px;
    background: #fff;
    opacity: 1;
    border-radius: 4px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.34)
  }

</style>

<template>
  <div class="index" ref="indxHeight">
    <div class="top" id="top">
      <div class="background-top" style="position: absolute;top:0;z-index: 999;width: 100%;">
        <div class="head">
          <div class="head-left">
            <!--<h1 class="iconfont icon-smalllogo1">-->
            <!--</h1>-->
          </div>
          <div class="head-center">
            <h3 class="iconfont icon-tubiaozhizuomoban"></h3>
            <input type="text" placeholder="搜索组合" @focus="handleFocus">
          </div>
          <div class="head-right"><h1 class="iconfont icon-liuyan" @click="toMessage"></h1></div>
        </div>
      </div>


      <div class="lunbo">
       <mt-swipe :auto="40000">
          <mt-swipe-item>
            <div style="width: 100%;height:100%;" @click="toOpen">
              <img src="../../assets/img/kaihu3.png" alt="" width="100%" height="100%">
            </div>
          </mt-swipe-item>
          <mt-swipe-item>
            <div style="width: 100%;height:100%;" @click="toVideo">
              <img src="../../assets/img/wujiec.png" alt="" width="100%" height="100%">
            </div>
          </mt-swipe-item>
        </mt-swipe>
      </div>

      <div class="nav">
        <ul>
          <li>
            <a @click="toOpen">
              <div>
                <h1 class="iconfont icon-jijintakaihu"></h1>
              </div>
              <h4>立即开户</h4>
            </a>
          </li>
          <li>
            <router-link to="/video">
              <div>
                <h1 class="iconfont icon-zhibo-copy"></h1>
              </div>
              <h4>宽博士电台</h4>
            </router-link>
          </li>
          <li>
            <a @click="$router.push('/iwantstrategy')">
              <div>
                <h1 class="iconfont icon-combine-manage"></h1>
              </div>
              <h4>我要策略</h4>
            </a>
          </li>
          <li>
            <router-link to="/newper">
              <div>
                <h1 class="iconfont icon-pinpaijieshao"></h1>
              </div>
              <h4>品牌介绍</h4>
            </router-link>
          </li>
        </ul>
      </div>
      <mt-navbar v-model="selected" id="top2">
        <mt-tab-item id="1"><span>金股推荐<b></b></span></mt-tab-item>
        <mt-tab-item id="2"><span>热门推荐<b></b></span></mt-tab-item>
        <mt-tab-item id="3"><span>关注动态<b></b></span></mt-tab-item>
      </mt-navbar>
    </div>

    <div class="content">
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1">
          <div class="jingu">
            <div class="jingu-top">
              <div class="jingu-left">
                <h3 v-if="stock">{{stock.name}}</h3>
                <p v-if="stock">{{stock._id}}</p>
              </div>
              <div class="jingu-right">
                <h1 v-if="stock">{{stock.symbol}}{{stock.price.last}}</h1>
                <h5>最新价格</h5>
              </div>
            </div>
            <div class="jingu-m">
              <div class="jingu-middle">
                <h5 v-if="stock">{{stock.intro}}</h5>
              </div>
            </div>
            <div class="jingu-bottom">
              <ul>
                <li>
                  <p>总收入</p>
                  <h3 v-if="stock">${{stock.fin_summary.total_revenue | muchmoney}}</h3>
                </li>
                <li>
                  <p>每股分红</p>
                  <h3 v-if="stock">{{stock.fin_summary.dividend_per_share | muchmoney}}</h3>
                </li>
                <li>
                  <p>每股盈利</p>
                  <h3 v-if="stock">{{stock.fin_summary.eps | muchmoney}}</h3>
                </li>
              </ul>
            </div>
            <div class="buy-now">
              <p @click="tosignal">立即购买</p>
            </div>
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <div class="content-bottom">
            <ul>
              <li>
                <a @click="link1">
                  <div class="li-top">
                    <h4>本日最高收益组合</h4>
                    <div>
                      <h4>查看详情</h4>
                      <h3 class="iconfont icon-xiangyou1"></h3>
                    </div>
                  </div>
                  <div class="li-bottom">
                    <div class="li-left">
                      <h1>{{allData.max_r.daily_r | percent}} <h2>%</h2></h1>
                      <h4>本日收益率</h4>
                    </div>
                    <div class="li-right">
                      <h3>{{allData.max_r.labels.country}}·{{allData.max_r.labels.index_name}}</h3>
                      <div>
                        <h4>{{allData.max_r.labels.size_name}}</h4>
                        <h4>{{allData.max_r.labels.feature}}</h4>
                      </div>
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a @click="link2">
                  <div class="li-top">
                    <h4>本月最强夏普比率</h4>
                    <div>
                      <h4>查看详情</h4>
                      <h3 class="iconfont icon-xiangyou1"></h3>
                    </div>
                  </div>
                  <div class="li-bottom">
                    <div class="li-left">
                      <h1>{{allData.max_sharp.sharpe | toFixed}}</h1>
                      <h4>夏普比率</h4>
                    </div>
                    <div class="li-right">
                      <h3>{{allData.max_sharp.labels.country}}·{{allData.max_sharp.labels.index_name}}</h3>
                      <div>
                        <h4>{{allData.max_sharp.labels.size_name}}</h4>
                        <h4>{{allData.max_sharp.labels.feature}}</h4>
                      </div>
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
            <!--<img src="./assets/img/sad.png" alt="">-->
            <!--<p>还没有关注的策略~</p>-->
            <div class="content-bottom content-bottom1">
              <ul v-if="followDatas">
                <li v-for="followData in followDatas">
                  <router-link :to="{path:'./subscribe',query:{id:followData.strategy_name}}">
                    <div class="li-bottom">
                      <div class="li-right">
                        <h3 style="text-align: left;">{{followData.labels.country}}·{{followData.labels.index_name}}</h3>
                        <div style="flex-direction: row">
                          <h4>{{followData.labels.size_name}}</h4>
                          <h4 style="margin-left: 4px;">{{followData.labels.feature}}</h4>
                        </div>
                      </div>
                      <div class="li-left">
                        <h1 style="justify-content: flex-end;">{{followData.daily_r | percent}} <h2>%</h2></h1>
                        <h4 style="text-align: right">本日收益率</h4>
                      </div>
                    </div>
                    <div class="li-top" style="border-top:1px solid #e9e9e9;border-bottom: none;flex-direction: row-reverse;">
                      <div>
                        <h4>查看详情</h4>
                        <h3 class="iconfont icon-xiangyou1"></h3>
                      </div>
                    </div>
                  </router-link>
                </li>
              </ul>
              <div v-else style="display: flex;flex-direction:column;justify-content: center;align-items: center;margin-top: 40px;">
                <img src="../../assets/img/sad.png" alt="" width="83" height="95">
                <p style="margin-top: 10px;">还没有关注的策略~</p>
              </div>
            </div>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>

<script>
  import myFooter from '../../components/footer.vue'
  import { Navbar, TabItem } from 'mint-ui';
  import { TabContainer, TabContainerItem } from 'mint-ui'
  import host from '../../config.js'
  import axios from 'axios'
  import { Search } from 'mint-ui'
  import { Swipe, SwipeItem } from 'mint-ui'
  import {Toast} from 'mint-ui'

  export default {
    components: {
      myFooter,
      mtSwipe: Swipe,
      mtSwipeItem: SwipeItem,
      mtTabContainer: TabContainer,
      mtTabContainerItem: TabContainerItem,
      mtNavbar: Navbar,
      mtTabItem: TabItem,
      mtSearch: Search
    },
    data () {
      return {
        token: null,
        selected: "1",
        allData: {
          "max_sharp": {
            "strategy_chinese_name": null,
            "sharpe": '0',
            "rate": 0,
            "labels": {
              "country": '0',
              "index_name": '0',
              "size_name": '0',
              "feature": '0'
            },
            "strategy_name": null,
            "daily_r": null
          },
          "max_r": {
            "strategy_chinese_name": null,
            "sharpe": 0,
            "rate": 0,
            "labels": {
              "country": '0',
              "index_name": '0',
              "size_name": '0',
              "feature": '0'
            },
            "strategy_name": null,
            "daily_r": null
          }
        },
        stock: null,
        followDatas: null
      }
    },
    methods: {
      stockData () {
        let that = this
        axios({
          method: 'GET',
          // headers: {'Authorization': window.localStorage.getItem('token')},
          url: host.host + "/api/security/recommend"
        }).then(function (data) {
          if (data.data.code === 200) {
            that.stock = data.data.data
          }
        })
      },
      findData () {
        if (!this.$store.state.networkState) {
          this.$plugins.networkErr()
          this.findDataByCache(this.$config.cacheTime.offlineCache)
          return
        }
        localStorage.getItem('indexData') ? this.findDataByCache(this.$config.cacheTime.onlineCache) : this.findDataByNetWork()
      },
      findDataByNetWork () {
        let that = this
        // axios({
        //    method: 'GET',
        //    headers: {'Authorization': that.token},
        //    url: host.host + "/api/strategy/hot",
        // }).then(function (data) {
        //   if (data.data.code === 200) {
        //     that.allData = data.data.data
        //     that.$plugins.cacheControl.setCache('indexData', that.allData)
        //   }
        // })
        this.$http.get('/strategy/hot').then((data) => {
          that.allData = data.data.data
          that.$plugins.cacheControl.setCache('indexData', that.allData)
        }).catch((err) => {
          if (err === 'timeout') this.$store.state.networkState = false
        })
      },
      findDataByCache (min) {
          this.$plugins.cacheControl.getCache('indexData', min).then((res) => {
            this.allData = res.data
        }).catch((err) => {
            this.findDataByNetWork()
        })
      },
      handleFocus () {
        this.$router.push('/searchCom')
      },
      toMessage () {
        this.$router.push('/messageCenter')
      },
      toVideo () {
        this.$router.push('/video')
      },
      toOpen () {
        let token = window.localStorage.getItem('token')
        let that = this
        axios({
          method: 'GET',
          headers: {'Authorization': window.localStorage.getItem('token')},
          url: host.host + "/api/trade/iBind",
          timeout: this.$config.timeout
        }).then(function (data) {
          if(data.data.code === 6006) {
            that.$router.push('../login')
          }
          if(data.data.code === 6007){
            that.$refreshToken()
          }
          if (data.data.code === 200) {
            Toast({
              message: '已开户',
              duration: 1000
            })
            return
          } else {
            that.$router.push('./open2')
          }
        })
      },
      link1 () {
        let token = window.localStorage.getItem('token')
        if (window.localStorage.getItem('token') === 'null' || !window.localStorage.getItem('token')) {
          this.$router.push('/login')
        } else {
          this.$router.push({
            path: 'subscribe/',
            query: {id: this.allData.max_r.strategy_name}
          })
        }
      },
      link2 () {
        let token = window.localStorage.getItem('token')
        if (window.localStorage.getItem('token') === 'null' || !window.localStorage.getItem('token')) {
          this.$router.push('/login')
        } else {
          this.$router.push({
            path: 'subscribe/',
            query: {id: this.allData.max_sharp.strategy_name}
          })
        }
      },
//      link3 () {
//        let token = window.localStorage.getItem('token')
//        if (token === 'null' || !token) {
//          this.$router.push('/login')
//        } else {
//          this.$router.push({
//            path: 'subscribe/',
//            query: {id: this.allData.max_sharp.strategy_name}
//          })
//        }
//      },
      tosignal () {
        let token = window.localStorage.getItem('token')
        if(window.localStorage.getItem('token') === 'null' || !window.localStorage.getItem('token')) {
          this.$router.push('/login')
        }else{
          this.$router.push({path:'./qstrategy/signal',query: {id: this.stock._id}})
        }
      },
      getFollow () {
        let that = this
        axios({
          method: 'GET',
          headers: {'Authorization': window.localStorage.getItem('token')},
          url: host.host + "/api/strategy/follow",
          timeout: that.$config.timeout
        }).then(function (data) {
          if(data.data.code === 6006) {
            that.followDatas = null
          }
          if(data.data.code === 6007){
            that.followDatas = null
          }
          if (data.data.code === 200) {
            that.followDatas = data.data.data
          }
        })
      }
    },
    filters: {
      percent (data) {
        if (data) {
          return (parseFloat(data) * 100).toFixed(2)
        } else {
          return
        }
      },
      toFixed (data) {
        if (data) {
          return (parseFloat(data)).toFixed(2)
        } else {
          return
        }
      },
      muchmoney (data) {
        if(data >= 100000000) {
          return (data / 100000000).toFixed(2) + '亿'
        } else if (data < 100000000 && data >= 10000) {
          return (data / 10000).toFixed(2) + '万'
        }else {
          return data
        }
      }
    },
    activated () {
      this.findData()
      this.stockData()
      this.getFollow()
    }
  }
</script>
